<template>
  <div
    class="hotBox"
    :class="{
      darkN: themeRef.state.themeState == 'drak',
      lightN: themeRef.state.themeState == 'light',
    }"
  >
    <template v-if="loadingRef">
      <div
        class="placeholder"
        :class="{
          dark: themeRef.state.themeState == 'drak',
          light: themeRef.state.themeState == 'light',
        }"
        v-for="item in 6"
        :key="item"
      >
        <el-skeleton
          animated
          style="--el-skeleton-circle-size: 60px; width: 10%"
        >
          <template #template>
            <el-skeleton-item variant="circle" />
          </template>
        </el-skeleton>
        <el-skeleton
          :rows="3"
          animated
          style="--el-skeleton-circle-size: 100px; width: 90%"
        />
      </div>
    </template>
    <template v-else>
      <BlogItem
        v-for="item in renderDataRef"
        :key="item.blogID"
        :renderData="item"
      />
    </template>
    <div
      v-if="!finalPage"
      class="more"
      @click="getMoreData"
      :class="{
        dark: themeRef.state.themeState == 'drak',
        light: themeRef.state.themeState == 'light',
      }"
    >
      加载更多
    </div>
    <div class="final" v-else>到底了~~~~</div>
  </div>
</template>
<script lang="ts">
import { Vue, Options } from "vue-class-component";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import ins from "../../../utils/Axios";
import BlogItem from "../../../components/BlogItemComp/BlogItem.vue";
@Options({
  components: { BlogItem },
  // 周期狗子
  mounted() {
    this.getBeginData();
  },
})
export default class Hot extends Vue {
  themeRef: any = useStore();
  // 加载中状态
  loadingRef: boolean = true;
  // 渲染数据
  renderDataRef: Array<Object> = [];
  // 当前第几页
  pageRef: number = 1;
  // 当前每页获取多少数据
  pageNumber: number = 5;
  // 当前是否最后一页
  finalPage: boolean = false;
  // 初始渲染数据的获取
  getBeginData() {
    ins
      .post("/blog/getHotBlog", {
        getPage: this.pageRef,
        getNumber: this.pageNumber,
      })
      .then((res: any) => {
        let { data } = res;
        this.renderDataRef = data.data;
        this.loadingRef = false;
      })
      .catch((err?: Object) => {
        ElMessage.error("网络出现异常，请稍后再试！");
      });
  }
  getMoreData() {
    this.pageRef++;
    ins
      .post("/blog/getHotBlog", {
        getPage: this.pageRef,
        getNumber: this.pageNumber,
      })
      .then((res: any) => {
        let { data } = res;
        if (data.data.length < this.pageNumber) {
          this.finalPage = true;
        }
        data.data.forEach((element: any) => {
          this.renderDataRef.push(element);
        });
        this.loadingRef = false;
      })
      .catch((err?: Object) => {
        ElMessage.error("网络出现异常，请稍后再试！");
      });
  }
}
</script>

<style lang="less" scoped>
@import url("../../../assets/less/global.less");
@import url("./index.less");
</style>